<template>
  <div id="profileHead">
    <img id="profileP1" src="../../../../assets/img/home/titleChar1.png" alt="">
    <img id="profileP2" src="../../../../assets/img/home/titleChar2.png" alt="">
    <el-avatar id="profileAvatar" fit="fill" :size="140" :src="imgUrl"></el-avatar>
    <p id="name">{{ profileName }}</p>
    <p id="status">（{{status}}）</p>
    <table id="profileRoute" cellspacing="0" border="0">
      <td>
        <el-button @click="JumpToHome">回到首页</el-button>
      </td>
      <td>
        <el-button>用户专享</el-button>
      </td>
      <td>
        <el-button @click="JumpToInfo">基本信息</el-button>
      </td>
      <td>
        <el-button @click="JumpToSetting">账户设置</el-button>
      </td>
      <td>
        <el-button @click="logOut">退出系统</el-button>
      </td>
    </table>
  </div>
</template>

<script>
  export default {
    name: "ProfileHeadBar",
    data() {
      return {
        imgUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        profileName: this.$store.getters.getUserName,
        status: this.$store.getters.getStatus,
      }
    },
    methods: {
      JumpToHome() {
        this.$router.replace('/home');
      },
      logOut() {
        this.$store.commit('setIsLogin', false);
        window.localStorage.setItem('loginJudge', 'false');
        this.$router.replace('/login');
      },
      JumpToInfo() {
        document.getElementById("profileInfo").scrollIntoView({
          behavior: "smooth"
        });
      },
      JumpToSetting() {
        document.getElementById("infoSetting").scrollIntoView({
          behavior: "smooth"
        });
      },
    },
  }
</script>

<style scoped>
  #profileHead {
    position: absolute;
    width: 100%;
    height: 45%;
    border-radius: 10px;
    background: url("../../../../assets/img/profile/bg1.png") no-repeat fixed;
    box-shadow: -12px 12px 12px rgba(0, 0, 0, 0.2);
    z-index: 10;
    /*border: 1px solid;*/
  }
  #profileP1 {
    position: absolute;
    top: 10%;
    left: 3%;
    width: 25%;
  }
  #profileP2 {
    position: absolute;
    top: 33%;
    width: 24%;
    left: 8%;
  }
  #profileAvatar {
    position: absolute;
    top: 72%;
    left: 5%;
    border: white 4px solid;
    box-shadow: -12px 12px 12px rgba(0, 0, 0, 0.2);
  }
  #name {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    color: white;
    left: 18%;
    top: 88%;
  }
  #status {
    position: absolute;
    font-size: 22px;
    font-weight: bold;
    color: white;
    left: 23%;
    top: 88%;
  }
  #profileRoute {
    position: absolute;
    width: 40%;
    height: 15%;
    right: 5%;
    top: 85%;
  }
  #profileRoute td .el-button {
    background-color: rgba(0,0,0,0);
    border: 0;
    font-size: 18px;
    font-weight: bold;
    color: white;
    text-align: center;
  }
</style>